import Taro, { Component, Config } from "@tarojs/taro";
import {View, Text, Image, RichText, Button} from "@tarojs/components";
import {IStoreProps} from '../../store/Stores'
import {getRuntime, servicePhoneNumber, subtime} from '../../utils/common'
import {toJS} from "mobx";
import {inject, observer} from "@tarojs/mobx";
import PageFooterInfo from '../../components/PageFooterInfo'
import ViewPhone from '../../components/ViewPhone'
import Report from '../../components/Report'

import './index.less'
import rz from '../../assets/img/icon_28.png'


interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class LawyerDetail extends Component<IHomeProps>{
  constructor(props){
    super(props)
  }

  state = {
    lawyer: {},
    isVip: false,
    area: '', // 擅长区域
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '律政中心-律师详情'})
    const id = this.$router.params.id
    this.getLawyerInfo(parseInt(id))
    let userInfo = getRuntime().getUserInfo()
    //console.log(userInfo)
    if(userInfo&&userInfo.agencyLevel>0){ this.setState({isVip: true}) }
  }

  getSexNameByid(id:number=3) {
    const sexNameArr = ['男','女', '保密']
    return sexNameArr[id-1]
  }

  getLawyerInfo(id:number) {
    let { stores: { LegalStore } } = this.props
    LegalStore.getLawyerInfo({
      id,
      callback: lawyerInfo => {
        // console.error(lawyerInfo)
        this._getAreaNameById(lawyerInfo.areasOfExpertise)
        this.setState({
          lawyer: toJS(lawyerInfo)
        })
      }
    })
  }

  // 根据标签ID获取标签值
  _getAreaNameById(ids: string=''): any{
    let value = ''
    let { LegalStore } = this.props.stores
    LegalStore.getAreasOfExpertise({
      callback: res => {
        res&&res.items.map(item => {
          if(ids.indexOf(item['id'])!==-1){
            value+=item['areaName']+' '
          }
        })
        this.setState({
          area: value
        })
      }
    })
  }

  makePhone(phone: string = '') {
    if(!phone || !this.state.isVip){getRuntime().showToast('你还没有登录~'); return}
    getRuntime().makePhoneCall(phone)
  }

  render() {
    let { lawyer, isVip, area } = this.state
    return(
      <View className='lawyer-wrap lawyer-detail'>
        <View className='list-2'>
          <View className='item'>
            <Image src={lawyer.logoImg} className='lawyer-header' />
            <View className='lawyer-info'>
              <View className='line1'>
                <Text className='lawyer-title'>{lawyer.name} {lawyer.post}</Text>
              </View>
              <View className='line2'>
                <Text className='address'>{lawyer.businessName}</Text>
                <Text className='line' />
                <Text className='address'>{lawyer.post}</Text>
                <Text className='line' />
                <Text className='address'>{lawyer.officeAddress}</Text>
              </View>
              <Text className='lawyer-help'>已帮助{lawyer.helpAmount}人</Text>
            </View>
            <Image className='rz' src={rz} />
          </View>
        </View>
        <View className='interval' />
        <View className='column-title content-30'>
          <Text className='column-name'>律师简介</Text>
        </View>
        <View className='item-lawyer-desc'>
          {lawyer.workDescribe}
        </View>
        <View className='interval' />

        <View className='column-title content-30'>
          <Text className='column-name'>律师名片</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>性别：</Text>
            <Text className='name'>{this.getSexNameByid(lawyer.userSex)}</Text>
          </View>
          <View className='line'>
            <Text className='title'>学历：</Text>
            <Text className='name'>{lawyer.education}</Text>
          </View>
          <View className='line'>
            <Text className='title'>毕业院校：</Text>
            <View className='name'>
              <Text>{lawyer.graduationSchool}</Text>
            </View>
          </View>
          <View className='line'>
            <Text className='title'>所学专业：</Text>
            <Text className='name'>{lawyer.major}</Text>
          </View>
          <View className='line'>
            <Text className='title'>所在地区：</Text>
            <Text className='name'>{lawyer.officeAddress}</Text>
          </View>
        </View>
        <View className='interval' />

        <View className='column-title content-30'>
          <Text className='column-name'>执业信息</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>执业律所：</Text>
            {isVip&&<Text className='name'>{lawyer.lawFim}</Text>}
            {!isVip&& <View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>律所规模：</Text>
            <Text className='name'>{lawyer.lawScale}</Text>
          </View>
          <View className='line'>
            <Text className='title'>职务：</Text>
            <View className='name'>
              <Text>{lawyer.post}</Text>
            </View>
          </View>
          <View className='line'>
            <Text className='title'>执业证号：</Text>
            {isVip&&<Text className='name'>{lawyer.eduction}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>执业时间：</Text>
            <Text className='name'>{subtime(lawyer.practiceTime)}</Text>
          </View>
          <View className='line'>
            <Text className='title'>擅长领域：</Text>
            <Text className='name'>{area}</Text>
          </View>
          <View className='line'>
            <Text className='title'>服务区域：</Text>
            <Text className='name'>{lawyer.serviceArea}</Text>
          </View>
        </View>
        <View className='interval' />

        <View className='column-title content-30'>
          <Text className='column-name'>工作经历</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>企业名称：</Text>
            {isVip&&<Text className='name'>{lawyer.businessName}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>工作职位：</Text>
            <Text className='name'>{lawyer.jobPosition}</Text>
          </View>
          <View className='line'>
            <Text className='title'>开始时间：</Text>
            <View className='name'>
              <Text>{subtime(lawyer.startDate)}</Text>
            </View>
          </View>
          <View className='line'>
            <Text className='title'>结束时间：</Text>
            <Text className='name'>{subtime(lawyer.endDate)}</Text>
          </View>
          <View className='line'>
            <Text className='title'>职位描述：</Text>
            <Text className='name'>{lawyer.workDescribe}</Text>
          </View>
        </View>
        <View className='interval' />

        <View className='column-title content-30'>
          <Text className='column-name'>联系方式</Text>
        </View>
        <View className='item-lawyer'>
          <View className='line'>
            <Text className='title'>联系电话：</Text>
            {isVip&&<Text className='name'>{lawyer.phoneNumber}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
            {!isVip&& <ViewPhone />}
          </View>
          <View className='line'>
            <Text className='title'>微信号：</Text>
            {isVip&&<Text className='name'>{lawyer.wechatNumber}</Text>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>QQ号：</Text>
            {isVip&&<View className='name'>{lawyer.qqNumber}</View>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
          <View className='line'>
            <Text className='title'>办公地址：</Text>
            {isVip&&<View className='name'>{lawyer.officeAddress}</View>}
            {!isVip&&<View className='name'>
               <Text>*******</Text>
               <Text className='vip'>(VIP会员可见)</Text>
            </View>}
          </View>
        </View>
        <View className='interval' />


        <Report />

        <PageFooterInfo info={'投诉举报热线：'+servicePhoneNumber} />

        <View className='page-submit' onClick={this.makePhone.bind(this,lawyer.phoneNumber)} >联系该律师</View>
      </View>
    )
  }
}

export default LawyerDetail
